import React from 'react';
import { isEmpty, throttle } from 'lodash';
import { GeoJSON } from 'react-leaflet';
import MyGeojson from './components/Geojson';
import {
  conversionGeoData,
  geoJSONStyle
} from './utils/util';
import setting from './setting';
import { getValueDefault } from '../commonSetting';

class GeoDimensional extends React.PureComponent {
  static setting = setting;

  constructor(props) {
    super(props);
    this.geoJsonData = {};
    const valueDefault = getValueDefault(props);
    if (valueDefault) {
      this.setDataPool(valueDefault);
    }
  }

  get tooltip() {
    const {
      config: {
        tooltip: {
          show, borderColor, borderWidth, font,
          background: { type: backgroundType, backgroundColor, imageUrl }
        }
      }
    } = this.props;
    return {
      show,
      borderColor,
      borderWidth,
      font,
      backgroundType,
      backgroundColor,
      imageUrl
    };
  }

  // 获得提示框内容
  getPopupContent = (info) => {
    const {
      borderColor, borderWidth, font, backgroundType, backgroundColor, imageUrl
    } = this.tooltip;
    const myBackground = backgroundType === 'color'
      ? `background-color: ${backgroundColor}` : `background-image: url(${imageUrl})`;

    const infoArray = `${info}`.split(';');
    const text = infoArray.join('<br />');
    return `<div class="map-marker-content" style="${myBackground};
    border: ${borderWidth}px solid ${borderColor};
    color: ${font.color};
    font-size: ${font.fontSize}px;
    font-family: ${font.fontFamily};
    font-weight: ${font.fontWeight};">
    ${text}
  </div>`;
  };

  handleHightlight(layer) {
    layer.on('mouseover', (item) => {
      throttle(() => {
        const { id } = item.target.feature.properties;
        this.myRef.setActiveRegion(id);
      }, 300)();
    });
  }

  // 更新store中的dataPoll
  setDataPool(dataPoll) {
    // eslint-disable-next-line
    if (!this.props.events) return;
    const {
      bigScreen: { setDataPool }, editable,
      events: { click },
      path
    } = this.props;
    setDataPool(click, dataPoll, path, editable);
  }

  onEachFeature = (feature, layer) => {
    // 交互功能
    const { events } = this.props;

    if (events) {
      layer.on('click', () => {
        if (events && events.click.action.active) {
          this.setDataPool({ info: feature.properties.tooltip });
        }
      });
    }

    const { show } = this.tooltip;
    if (show === 'hide') {
      this.handleHightlight(layer);
    } else {
      this.handleHightlight(layer);
      const popupContent = this.getPopupContent(feature.properties.tooltip);
      if (show === 'click') {
        layer.bindPopup(popupContent, {
          closeButton: false,
          className: 'marker-popup'
        });
        return;
      }
      layer.bindTooltip(popupContent, {
        permanent: show === 'always',
        className: 'marker-tooltip',
        sticky: true
      });
    }
    setTimeout(() => {
      layer.bringToFront();
    }, 1000);
  };

  render() {
    const {
      data,
      width,
      height,
      config
    } = this.props;
    const { common: { backgroundInnerColor } } = config;
    if (isEmpty(data)) return null;
    this.geoJsonData = conversionGeoData(data);
    return (
      <React.Fragment>
        <GeoJSON
          key={Math.floor(Math.random() * 100)}
          data={this.geoJsonData}
          onEachFeature={this.onEachFeature}
          style={() => geoJSONStyle(backgroundInnerColor)}
        ></GeoJSON>
        <MyGeojson
          ref={(e) => { this.myRef = e; }}
          geoJsonData={this.geoJsonData}
          width={width}
          height={height}
          data={data}
          config={config}
        />
      </React.Fragment>
    );
  }
}

export default GeoDimensional;
